<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Toastr 提示 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    Toastr 是一个提示工具，提供了info、success、warning、danger级别的提示
                    <a class="e-link e-font-bold" href="https://codeseven.github.io/toastr" target="_blank">官方文档</a>
                    <a class="e-link e-font-bold" href="https://github.com/CodeSeven/toastr" target="_blank">Github</a>
                </div>
            </div>
        </div>
    </div>

    <!--begin::Portlet-->
    <div class="card">
        <div class="card-head">
            <div class="card-head-label">
                <h3 class="card-head-title">
                    示例
                </h3>
            </div>
        </div>

        <!--begin::Form-->
        <form class="e-form e-form--label-right">
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-4">

                        <div class="form-group">
                            <label for="title">标题</label>
                            <input id="title" type="text" class="form-control" placeholder="请输入标题"/>
                        </div>
                        <div class="form-group">
                            <label for="message">内容</label>
                            <textarea class="form-control" id="message" rows="3" placeholder="请输入内容"></textarea>
                        </div>

                        <div class="form-group">
                            <div class="e-checkbox-list">
                                <label class="e-checkbox">
                                    <input id="closeButton" type="checkbox" value="checked"/>关闭按钮
                                    <span></span>
                                </label>
                                <label class="e-checkbox">
                                    <input id="addBehaviorOnToastClick" type="checkbox" value="checked"/>点击回调
                                    <span></span>
                                </label>
                                <label class="e-checkbox">
                                    <input id="debugInfo" type="checkbox" value="checked"/>调试模式
                                    <span></span>
                                </label>
                                <label class="e-checkbox">
                                    <input id="progressBar" type="checkbox" value="checked"/>进度条
                                    <span></span>
                                </label>
                                <label class="e-checkbox">
                                    <input id="preventDuplicates" type="checkbox" value="checked"/>不允许提示相同内容
                                    <span></span>
                                </label>
                                <label class="e-checkbox">
                                    <input id="newestOnTop" type="checkbox" value="checked"/>新消息从顶部累加
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <label>级别</label>
                            <div class="e-radio-list" id="toastTypeGroup">
                                <label class="e-radio">
                                    <input type="radio" name="toasts" checked value="success"/>Success
                                    <span></span>
                                </label>
                                <label class="e-radio">
                                    <input type="radio" name="toasts" value="info"/>Info
                                    <span></span>
                                </label>
                                <label class="e-radio">
                                    <input type="radio" name="toasts" value="warning"/>Warning
                                    <span></span>
                                </label>
                                <label class="e-radio">
                                    <input type="radio" name="toasts" value="error"/>Error
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>位置</label>
                            <div class="e-radio-list" id="positionGroup">
                                <label class="e-radio">
                                    <input type="radio" name="positions" value="toast-top-right" checked/>右上
                                    <span></span>
                                </label>
                                <label class="e-radio">
                                    <input type="radio" name="positions" value="toast-bottom-right"/>右下
                                    <span></span>
                                </label>
                                <label class="e-radio">
                                    <input type="radio" name="positions" value="toast-bottom-left"/>左下
                                    <span></span>
                                </label>
                                <label class="e-radio">
                                    <input type="radio" name="positions" value="toast-top-left"/>左上
                                    <span></span>
                                </label>
                                <label class="e-radio">
                                    <input type="radio" name="positions" value="toast-top-center"/>顶部水平居中
                                    <span></span>
                                </label>
                                <label class="e-radio">
                                    <input type="radio" name="positions" value="toast-bottom-center"/>底部水平居中
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <label for="showEasing">Show Easing</label>
                            <input id="showEasing" type="text" class="form-control" placeholder="swing, linear"
                                   value="swing"/>
                        </div>
                        <div class="form-group">
                            <label for="hideEasing">Hide Easing</label>
                            <input id="hideEasing" type="text" class="form-control" placeholder="swing, linear"
                                   value="linear"/>
                        </div>
                        <div class="form-group">
                            <label for="showMethod">显示动画</label>
                            <input id="showMethod" type="text" class="form-control" placeholder="show, fadeIn, slideDown"
                                   value="fadeIn"/>
                        </div>
                        <div class="form-group">
                            <label for="hideMethod">消失动画</label>
                            <input id="hideMethod" type="text" class="form-control" placeholder="hide, fadeOut, slideUp"
                                   value="fadeOut"/>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group e-form-grou">
                            <label for="showDuration">显示动画过度时间（毫秒）</label>
                            <input id="showDuration" type="text" class="form-control" placeholder="ms" value="300"/>
                        </div>
                        <div class="form-group e-form-grou">
                            <label for="hideDuration">消失动画过度时间（毫秒）</label>
                            <input id="hideDuration" type="text" class="form-control" placeholder="ms" value="1000"/>
                        </div>
                        <div class="form-group e-form-grou">
                            <label for="timeOut">自动消失时间（毫秒）</label>
                            <input id="timeOut" type="text" class="form-control" placeholder="ms" value="5000"/>
                        </div>
                        <div class="form-group e-form-grou">
                            <label for="extendedTimeOut">Extended time out</label>
                            <input id="extendedTimeOut" class="form-control" type="text" placeholder="ms" value="1000"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <pre id='toastrOptions'
                                 style="border:4px solid #efefef;padding:15px; margin:20px 0;">Output:</pre>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-foot">
                <div class=" ">
                    <div class="row">
                        <div class="col-lg-8 offset-lg-4">
                            <a href="javascript:;" class="btn btn-brand" id="show-toast">显示提示</a>
                            <a href="javascript:;" class="btn btn-danger" id="clear-toasts">清除</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!--end::Form-->
    </div>
<!--end::Portlet-->
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
<!--str:: 页面js -->
<script src="/assets/js/demo1/pages/ui/assembly/toastr.js" type="text/javascript"></script>
<!--str:: 页面js -->
</body>
</html>